<template>
  <div>
    <section>
      <el-row class="title-add">
        <el-col :span="16">
          <el-button type="primary" icon="el-icon-plus" @click="addStu">新增班级</el-button>
        </el-col>
        <!--搜索条件-->
        <el-col :span="4">
          <el-input v-model="stuName" placeholder="请输入名称" clearable></el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" icon="el-icon-search" style="margin-left: 15px" @click="getList">查询</el-button>
          <el-button type="success" icon="el-icon-circle-close" style="margin-left: 15px" @click="cleanUp">清除</el-button>
        </el-col>
      </el-row>
      <el-table border ref="filterTable" :data="tableData" :header-cell-style="{background:'#f4f4f4', color:'#727479'}">
        <el-table-column prop="name" label="名称" align="center"></el-table-column>
        <el-table-column prop="sign" label="类型" align="center"
                         :filters="[{ text: '班级', value: 3 }, { text: '系', value: 2 }, { text: '学院', value: 1 }]"
                         :filter-method="filterTag" filter-placement="bottom-end">
          <template slot-scope="scope">
            <el-tag :type="scope.row.sign === 3 ? 'success':'primary'" disable-transitions>
              {{ scope.row.sign === 1 ? '学院' : scope.row.sign === 2 ? '系' : '班级' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="userName" label="管理者" align="center"></el-table-column>
        <el-table-column prop="grade" label="年级" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="editData(scope.$index, scope.row)">编辑</el-button>
            <el-button type="danger" size="small" @click="deleteData(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="bottom-page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </section>

    <!--新增/编辑模态框-->
    <section>
      <el-dialog :title="title" :closeOnClickModal="closeOnClickModal" :visible.sync="addAndEditDialogFormVisible"
                 :before-close="handleDialogClose">
        <el-form v-if="showAddAndEditForm" ref="addAndEditElForm" :model="addAndEditFormData" :rules="addAndEditRules"
                 class="form">
          <el-row>
            <el-col :span="10">
              <el-form-item prop="name" label="名称：" :label-width="formLabelWidth">
                <el-input v-model="addAndEditFormData.name" placeholder="请输入编辑名称" type="text" autosize></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item prop="sign" label="类型：" :label-width="formLabelWidth">
                <el-select v-model="addAndEditFormData.sign" placeholder="请选择类型" clearable @change="monitorSign">
                  <el-option value="1" label="学院"></el-option>
                  <el-option value="2" label="系"></el-option>
                  <el-option value="3" label="班级"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item prop="userId" label="管理者：" :label-width="formLabelWidth">
                <el-select v-model="addAndEditFormData.userId" placeholder="请选择管理者" style="width:100%" clearable>
                  <el-option v-for="item in userData" :key="item.value" :value="item.value" :label="item.label"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item prop="grade" label="年级：" :label-width="formLabelWidth">
                <el-input v-model="addAndEditFormData.grade" placeholder="请输入年级" style="width:100%" type="number"
                          min="2000" autosize clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item v-if="sign === '2'" prop="pid" label="学院：" :label-width="formLabelWidth">
                <el-select v-model="addAndEditFormData.pid" placeholder="请选择学院" style="width:100%" clearable>
                  <el-option v-for="item in collegeData" :key="item.id" :value="item.id" :label="item.name"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item v-if="sign === '3'" prop="pid" label="系：" :label-width="formLabelWidth">
                <el-select v-model="addAndEditFormData.pid" placeholder="请选择系" style="width:100%" clearable>
                  <el-option v-for="item in departmentData" :key="item.id" :value="item.id" :label="item.name"/>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleConfirmEvent('addAndEditElForm')">确 定</el-button>
          <el-button @click="handleDialogClose">返 回</el-button>
        </div>
      </el-dialog>
    </section>

  </div>
</template>

<script>
export default {
  name: "stuClass",
  data() {
    return {
      departmentData: [],                 // 系数据
      collegeData: [],                    // 学院数据
      sign: '',                           // pid选择的标志
      total: 1,                           // 总数
      page: 1,                            // 当前页
      limit: 10,                          // 分页大小
      stuName: '',
      tableData: [],
      userData: [],                       // 管理者

      // 新增
      title: '',
      closeOnClickModal: false,
      addAndEditDialogFormVisible: false,
      isEditable: true,                   // 标志是否是编辑
      showAddAndEditForm: false,
      showForm: false,
      formLabelWidth: '150px',
      addAndEditFormData: {
        id: '',
        name: '',
        pid: '',
        sign: '',
        grade: '',
        userId: ''
      },
      addAndEditRules: {
        name: {
          required: true, message: '名称不能为空', trigger: 'blur'
        },
        sign: {
          required: true, message: '类型不能为空', trigger: 'blur'
        },
        userId: {
          required: true, message: '管理者不能为空', trigger: 'blur'
        },
      },
    }
  },
  created() {
    this.getList();
  },
  methods: {
    // 新增
    addStu() {
      this.queryCollege();
      this.wholeUser();
      this.title = "新增";
      this.isEditable = false;
      this.showAddAndEditForm = true;
      this.addAndEditDialogFormVisible = true;
      this.sign = '';
    },

    // 查询
    getList() {
      this.api.getApi("/stu/class/get?page=" + this.page + "&limit=" + this.limit + "&name=" + this.stuName).then(res => {
        this.tableData = res.data.list;
        this.total = res.data.total;
        this.page = res.data.pageNum;
        this.limit = res.data.pageSize;
      })
    },

    // 查询系和学院
    async queryCollege() {
      this.departmentData = [];
      this.collegeData = [];
      await this.api.getApi("/stu/class/non/class").then(res => {
        this.collegeData = res.data.college;
        this.departmentData = res.data.department;
      })
    },

    // 筛选
    filterTag(value, row) {
      return row.sign === value;
    },

    // 清除
    cleanUp() {
      this.stuName = '';
      this.getList();
    },

    // 编辑
    editData(index, row) {
      this.queryCollege();
      this.wholeUser();
      this.title = "编辑";
      this.isEditable = true;
      this.$set(this.addAndEditFormData, 'id', row.id);
      this.$set(this.addAndEditFormData, 'name', row.name);
      this.$set(this.addAndEditFormData, 'pid', row.pid);
      this.$set(this.addAndEditFormData, 'sign', row.sign + '');
      this.$set(this.addAndEditFormData, 'grade', row.grade);
      this.$set(this.addAndEditFormData, 'userId', row.userId);
      this.showAddAndEditForm = true;
      this.addAndEditDialogFormVisible = true;
      // 系和学院显示
      this.sign = row.sign + '';
    },

    // 删除
    deleteData(id) {
      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.api.deleteApi("/stu/class/delete?id=" + id).then(res => {
          if (res.data.code === 200) {
            this.getList();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // 关闭模态框
    handleDialogClose() {
      this.showAddAndEditForm = false;
      this.addAndEditFormData = {};
      this.addAndEditDialogFormVisible = false;
    },

    // 保存/修改
    handleConfirmEvent(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          let formData = this.addAndEditFormData;
          if (this.isEditable) {
            this.api.putApi("/stu/class/update", formData).then(res => {
              if (res.data.code === 200) {
                this.getList();
                this.handleDialogClose();
              }
            })
          } else {
            this.api.postApi("/stu/class/add", formData).then(res => {
              if (res.data.code === 200) {
                this.getList();
                this.handleDialogClose();
              }
            })
          }
        }
      })
    },

    // 分页大小
    handleSizeChange(val) {
      this.limit = val;
      this.getList();
    },

    // 第几页
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    },

    // 加载全部用户
    async wholeUser() {
      this.userData = [];
      await this.api.getApi("/manager/stu/whole/user").then(res => {
        this.userData = res.data
      })
    },

    // 监听类型的变化
    monitorSign(value) {
      this.sign = value;
    },
  }
}
</script>

<style scoped>
.title-add {
  margin: 10px 10px 10px 0;
}

.title-add button {
  padding: 12px 7px;
}

.bottom-page {
  margin-top: 25px;
}
</style>
